<template>

  <div class="loginbg">
    <h1>养老机构等级划分及评定中心</h1>
    <h4>GRADING AND EVALUATION CENTER OF ELDERLY CARE INSTITUTIONS</h4>
    <Row class="login">
      <Col span="24">
      <!-- <Tabs value="account" style="width:40%；">
        <TabPane label="账号登录" name="account"> -->
          <Form :model="userFormItem" label-position="left">
            <FormItem label="账号">
              <Input v-model="userFormItem.loginname" placeholder="请输入账号信息"></Input>
            </FormItem>
            <FormItem label="密码">
              <Input type="password" v-model="userFormItem.password" placeholder="请输入密码信息"></Input>
            </FormItem>
            <FormItem label="验证码">
              <Row>
                <Col span="24">
                <Row>
                  <Col span="12">
                  <Input v-model="userFormItem.imgcode" placeholder="请输入验证码"></Input>
                  </Col>
                  <Col span="12">
                  <FormItem prop="time">
                    <div class="divIdentifyingCode" @click="getQRcode()">
                      <img id="imgIdentifyingCode2" :src="regSrc" style="height:33px; width: 100px; cursor: pointer;" alt="点击更换" title="点击更换" />
                    </div>
                  </FormItem>
                  </Col>
                </Row>
                </Col>
              </Row>
            </FormItem>
            <Button type="success" long @click="login(1)">立即登录 </Button>
          </Form>
        <!-- </TabPane> -->
        <!-- <TabPane label="手机号登录" name="mobile">
          <Form :model="phoneFormItem" label-position="left">
            <FormItem label="手机号">
              <Input v-model="phoneFormItem.phoneNumber" placeholder="请输入手机号信息"></Input>
            </FormItem>
            <FormItem label="验证码">
              <Row>
                <Col span="24">
                <Row>
                  <Col span="12">
                  <Input v-model="phoneFormItem.imgcode" placeholder="请输入验证码"></Input>
                  </Col>
                  <Col span="12">
                  <FormItem prop="time">
                    <div class="divIdentifyingCode" @click="getQRcodePhone()">
                      <img id="imgIdentifyingCode" :src="regSrcPhone" style="height:33px; width: 100px; cursor: pointer;" alt="点击更换" title="点击更换" />
                    </div>
                  </FormItem>
                  </Col>
                </Row>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="手机号验证">
              <Row>
                <Col span="24">
                <Row>
                  <Col span="12">
                  <FormItem prop="date">
                    <Input v-model="phoneFormItem.code" placeholder="请输入手机验证码"></Input>
                  </FormItem>
                  </Col>
                  <Col span="12">
                  <FormItem prop="time" v-show="show">
                    <Button type="success" value="" @click="getCode(1)" >获取验证码 </Button>
                  </FormItem>
                  <FormItem v-show="showtime">
                    <span type="success" value="" style="display: inline-block;color: #fff;padding:0 40px;background:#19BE6B;border-radius:4px;border-color:#19be6b;vertical-align: middle;text-align: center;font-weight: 400;font-size: 16px;height: 32px;">{{ count }}</span>
                  </FormItem>
                  </Col>
                </Row>
                </Col>
              </Row>

            </FormItem>
            <Button type="success" long value="" @click="login(2)">立即登录 </Button>

          </Form>
        </TabPane>
      </Tabs> -->
      <Row style="padding-top:1rem">
        <Col style="text-align:left" span="12">
        <a @click="isShowForget = true"> 忘记密码？ </a>
        </Col>
        <Col style="text-align:right" span="12">
        没有账号？ <a @click="isShowRegister = true">立即注册 </a>
        </Col>
      </Row>
      </Col>
    </Row>
    <Modal width='400' v-model="isShowRegister">
      <div slot="header" style="color:#333;text-align:center">
        <span>注册账号</span> </div>
      <Form class="baseform" :model="formItem" :rules="ruleValidate" :label-width="100">
        <FormItem label="账号" prop="userName">
          <Input v-model="formItem.userName" placeholder="请输入账号"></Input>
        </FormItem>
        <FormItem label="密码" prop="userPassword">
          <Input type='password' v-model="formItem.userPassword" placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem label="重复密码" prop="repeatPassword">
          <Input type='password' v-model="formItem.repeatPassword" placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem label="手机号" prop="phoneNumber">
          <Input v-model="formItem.phoneNumber" placeholder="请输入手机号"></Input>
        </FormItem>
        <FormItem label="验证码" prop="code">
          <Input style="width:50%;display:inline-block;" v-model="formItem.code" placeholder="请输入验证码"></Input>
          <Button v-show="showregister" style="width:48%;display:inline-block;" type="success" @click="getCode(3)" value="">获取验证码 </Button>
          <span v-show="showtimeregister" type="success" value="" style="display: inline-block;color: #fff;padding:0 40px;background:#19BE6B;border-radius:4px;border-color:#19be6b;vertical-align: middle;text-align: center;font-weight: 400;font-size: 16px;height: 32px;">{{ countregister }}</span>
        </FormItem>
        <FormItem label="邮箱" prop="userEmail">
          <Input v-model="formItem.userEmail" placeholder="请输入邮箱"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button style="width:100%" type="success" :loading="modal_loading" @click="register" value="">立即注册 </Button>
      </div>
    </Modal>

    <Modal width='400' v-model="isShowForget">
      <div slot="header" style="color:#333;text-align:center">
        <span>找回密码</span> </div>
      <Form class="baseform" :model="forgetItem" :rules="ruleValidate" :label-width="100">

        <FormItem label="手机号" prop="phoneNumber">
          <Input v-model="forgetItem.phoneNumber" placeholder="请输入手机号"></Input>
        </FormItem>
        <FormItem label="验证码" prop="code">
          <Input style="width:50%;display:inline-block;" v-model="forgetItem.code" placeholder="请输入验证码"></Input>
          <Button v-show="showback" style="width:48%;display:inline-block;" type="success" value="" @click="getCode(2)">获取验证码 </Button>
          <span v-show="showtimeback" type="success" value="" style="display: inline-block;color: #fff;padding:0 40px;background:#19BE6B;border-radius:4px;border-color:#19be6b;vertical-align: middle;text-align: center;font-weight: 400;font-size: 16px;height: 32px;">{{ countback }}</span>
        </FormItem>

        <FormItem label="密码" prop="newpwd">
          <Input type='password' v-model="forgetItem.newpwd" placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem label="重复密码" prop="repeatPassword">
          <Input type='password' v-model="forgetItem.repeatPassword" placeholder="请输入密码"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button style="width:100%" type="success" :loading="modal_loading" @click="resetpwd" value="">立即修改 </Button>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import ajax from '../lib/ajax'
import baseURL from '../lib/url'
@Component({
})
export default class Login extends Vue {
  title = '用户登录/注册'
  loginname = ''
  timer: any
  show = true
  showtime = false
  showback = true
  showtimeback = false
  showregister = true
  showtimeregister = false
  count = 60
  countback = 60
  countregister = 60
  isShowRegister = false
  isShowForget = false
  modal_loading = false
  myrandom = Math.random() + ''
  myrandomPhone = Math.random() + ''

  forgetItem = {
    newpwd: '',
    repeatPassword: '',
    phoneNumber: '',
    code: ''
  }

  formItem = {
    userName: '',
    userPassword: '',
    repeatPassword: '',
    phoneNumber: '',
    userEmail: '',
    code: ''
  }

  data = {
    phoneNumber: ''
  }

  formRegisterCode = {
    phoneNumber: ''
  }

  get userFormItem() {
    return {
      loginname: '',
      password: '',
      imgcode: '',
      random: this.myrandom
    }
  }

  regSrc = baseURL + 'captcha?codeKey=' + this.userFormItem.random

  get phoneFormItem() {
    return {
      phoneNumber: '',
      code: '',
      imgcode: '',
      random: this.myrandomPhone
    }
  }

  regSrcPhone = baseURL + 'captcha?codeKey=' + this.phoneFormItem.random

  getQRcode() { // 获取二维码
    this.userFormItem.random = Math.random() + ''
    this.regSrc = baseURL + 'captcha?codeKey=' + this.userFormItem.random
  }

  getQRcodePhone() { // 获取二维码
    this.phoneFormItem.random = Math.random() + ''
    this.regSrcPhone = baseURL + 'captcha?codeKey=' + this.phoneFormItem.random
  }

  login(type: number) {
    if (type === 1) {
      ajax.post('login', this.userFormItem).then(result => {
        if (result.data.code === 200) {
          this.$store.commit('session/setUser', result.data.data)
          console.log('%c%s', 'color:green', 'token ==>' + result.data.data.token)
          this.$store.commit('session/setToken', result.data.data.token)
          ajax.post('authorState').then(result => {
            this.$store.commit('session/setAuthorStates', result.data.data)
          })
          ajax.post('evaluatorState').then(result => {
            this.$store.commit('session/setEvaluatorStates', result.data.data)
          })
          // qs.parse()是将URL解析成对象的形式
          const query = this.$route.query
          if (query.redirect) {
            const redirect = query.redirect.toString()
            console.log('%c%s', 'color:red', 'login redirect==>' + redirect)
            this.$router.push(redirect)
            // window.location.reload()
          } else {
            this.$router.push('/Home')
          }
        }
      })
    } else if (type === 2) {
      ajax.post('userPhoneLogin', this.phoneFormItem).then(result => {
        if (result.data.code === 200) {
          this.$store.commit('session/setUser', result.data.data)
          console.log('%c%s', 'color:green', 'token ==>' + result.data.data.token)
          this.$store.commit('session/setToken', result.data.data.token)
          ajax.post('authorState').then(result => {
            this.$store.commit('session/setAuthorStates', result.data.data)
          })
          ajax.post('evaluatorState').then(result => {
            this.$store.commit('session/setEvaluatorStates', result.data.data)
          })
          // qs.parse()是将URL解析成对象的形式
          const query = this.$route.query
          if (query.redirect) {
            const redirect = query.redirect.toString()
            this.$router.push(redirect)
            window.location.reload()
          } else {
            this.$router.push('/Home')
          }
        }
      })
    }
  }

  getCode(type: number) {
    if (type === 1) {
      if (this.phoneFormItem.phoneNumber !== '' && this.phoneFormItem.phoneNumber !== null) { // 1.首先判断是否未输入手机号码就点击获取验证码
        if (/^1[3456789]\d{9}$/.test(this.phoneFormItem.phoneNumber)) { // 2.使用正则判断手机输入的验证码是否符合规范
          const TIME_COUNT = 60 // 3.设置时间为60s
          if (!this.timer) {
            this.count = TIME_COUNT
            this.show = false // 4.隐藏获取验证码按钮,展示倒计时模块
            this.showtime = true
            this.getPhoneCode(1) // 5.调用后端获取验证码接口的函数
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) { // 6.设置每秒钟递减
                this.count--
              } else { // 7.递减至0时,显示获取验证码按钮,隐藏倒计时模块,清除定时器this.timer,并将其置为null
                this.show = true
                this.showtime = false
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
        } else {
          this.$Message.error('手机号格式不正确!')
        }
      } else {
        this.$Message.error('请先填写手机号码!')
      }
    } else if (type === 2) {
      if (this.forgetItem.phoneNumber !== '' && this.forgetItem.phoneNumber !== null) { // 1.首先判断是否未输入手机号码就点击获取验证码
        if (/^1[3456789]\d{9}$/.test(this.forgetItem.phoneNumber)) { // 2.使用正则判断手机输入的验证码是否符合规范
          const TIME_COUNT = 60 // 3.设置时间为60s
          if (!this.timer) {
            this.countback = TIME_COUNT
            this.showback = false // 4.隐藏获取验证码按钮,展示倒计时模块
            this.showtimeback = true
            this.getPhoneCode(2) // 5.调用后端获取验证码接口的函数
            this.timer = setInterval(() => {
              if (this.countback > 0 && this.countback <= TIME_COUNT) { // 6.设置每秒钟递减
                this.countback--
              } else { // 7.递减至0时,显示获取验证码按钮,隐藏倒计时模块,清除定时器this.timer,并将其置为null
                this.showback = true
                this.showtimeback = false
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
        } else {
          this.$Message.error('手机号格式不正确!')
        }
      } else {
        this.$Message.error('请先填写手机号码!')
      }
    } else if (type === 3) {
      if (this.formItem.phoneNumber !== '' && this.formItem.phoneNumber !== null) { // 1.首先判断是否未输入手机号码就点击获取验证码
        if (/^1[3456789]\d{9}$/.test(this.formItem.phoneNumber)) { // 2.使用正则判断手机输入的验证码是否符合规范
          const TIME_COUNT = 60 // 3.设置时间为60s
          if (!this.timer) {
            this.countregister = TIME_COUNT
            this.showregister = false // 4.隐藏获取验证码按钮,展示倒计时模块
            this.showtimeregister = true
            this.getRegisterCode() // 5.调用后端获取验证码接口的函数
            this.timer = setInterval(() => {
              if (this.countregister > 0 && this.countregister <= TIME_COUNT) { // 6.设置每秒钟递减
                this.countregister--
              } else { // 7.递减至0时,显示获取验证码按钮,隐藏倒计时模块,清除定时器this.timer,并将其置为null
                this.showregister = true
                this.showtimeregister = false
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
        } else {
          this.$Message.error('手机号格式不正确!')
        }
      } else {
        this.$Message.error('请先填写手机号码!')
      }
    }
  }

  getIdentifyingCode() {
    //
  }

  getPhoneCode(type: number) {
    if (type === 1) {
      this.data.phoneNumber = this.phoneFormItem.phoneNumber
      ajax.post('getLoginSmsCode', this.data).then(result => {
        if (result.data.code === 200) {
          this.$Message.success('验证码发送成功')
        }
      })
    } else if (type === 2) {
      this.data.phoneNumber = this.forgetItem.phoneNumber
      ajax.post('getFindPwdbackSmsCode', this.data).then(result => {
        if (result.data.code === 200) {
          this.$Message.success('验证码发送成功')
        }
      })
    }
  }

  getRegisterCode() {
    this.data.phoneNumber = this.formItem.phoneNumber
    ajax.post('getRegisterSmsCode', this.data).then((result) => {
      if (result.data.code === 200) {
        this.$Message.success('验证码发送成功')
      }
    })
  }

  register() {
    this.$Modal.confirm({
      title: '确认',
      content: '确认吗',
      onOk: () => {
        ajax.post('register', this.formItem).then(result => {
          if (result.data.code === 200) {
            this.$Message.success('恭喜你注册成功')
            this.isShowRegister = false
            this.$store.commit('session/setUser', result.data.data)
            console.log('%c%s', 'color:yellow', 'token ==>' + result.data.data.token)
            this.$store.commit('session/setToken', result.data.data.token)
            ajax.post('authorState').then(result => {
              this.$store.commit('session/setAuthorStates', result.data.data)
            })
            ajax.post('evaluatorState').then(result => {
              this.$store.commit('session/setEvaluatorStates', result.data.data)
            })
            // qs.parse()是将URL解析成对象的形式
            const query = this.$route.query
            if (query.redirect) {
              const redirect = query.redirect.toString()
              this.$router.push(redirect)
              window.location.reload()
            } else {
              this.$router.push('/Home')
            }
          }
        })
      },
      onCancel: () => {
        this.$Message.info('取消成功')
      }
    })
  }

  resetpwd() {
    ajax.post('findPwdBack', this.forgetItem).then(result => {
      if (result.data.code === 200) {
        this.$Message.success(result.data.msg)
        this.isShowForget = false
      }
    })
  }

  ruleValidate = {
    userName: [
      { required: true, message: '账号不能为空', trigger: 'blur' }
    ],
    newpwd: [
      { required: true, message: '密码不能为空', trigger: 'blur' }
    ],
    userPassword: [
      { required: true, message: '密码不能为空', trigger: 'blur' }
    ],
    repeatPassword: [
      { required: true, message: '密码不能为空', trigger: 'blur' }
    ],
    phoneNumber: [
      { required: true, message: '手机号不能为空', trigger: 'blur' },
      { type: 'string', pattern: /^1[3456789]\d{9}$/, message: '手机号格式有误', trigger: 'blur' }
    ],
    userEmail: [
      { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
    ]
  }
}
</script>
<style scoped>
.loginbg {
  position: absolute;
  padding-top: 4rem;
  width: 100%;
  height: 100%;
  /* background: transparent; */
  background: url('../assets/loginbg.png') no-repeat center center;
}
.login {
  width: 320px;
  margin: 140px 20% auto auto; /* 上下间距160px，左右自动居中*/
  background-color: rgb(255, 255, 255, 1); /* 透明背景色 */
  padding: 30px;
  border-radius: 20px; /* 圆角 */
  /* background: transparent; */
}
.baseform {
  font-size: 1.2rem;
  width: 100%;
  margin: 0 auto;
}
</style>
